<template>
    <div class="box_bg">
        <h2 class="box_tit">
            <i class="icon icon1"></i>角色管理/添加角色
            <i class="reti"></i>
        </h2>
        <!-- <div class="blank20"></div> -->
        <div class="role_box">
            <!-- 表单开始 -->
            <el-form ref="editInputList" :model="roleInf" label-width="80px">
                <el-form-item label="角色名称：" prop="name">
                    <el-input v-model="roleInf.name" placeholder="角色名称"></el-input>
                </el-form-item>
                <el-form-item label="资源配置：">
                    <div class="zTreeBodybox">
                        <div id="zTreeBody">
                            <ul id="treeDemoOne1" class="ztree"></ul>
                        </div>
                    </div>

                </el-form-item>
                <el-form-item label="角色说明：" prop="remark">
                    <el-input type="textarea" v-model="roleInf.remark"></el-input>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>
<script>
import {officesUrl,officesHandleUrl,officesTreeUrl} from "../../../axios/api.js"
import vbootstrapStyle from "../../../../static/css/bootstrapStyle.css";
import vZtreeCore from "../../../../static/js/jquery.ztree.core.js";
import vZtreeExcheck from "../../../../static/js/jquery.ztree.excheck.js";
export default {
    data() {
        return {
            roleInf:{
                id:'',
                name:'',
                level:1,
                remark:''
            },
            resouceIds:[],
            nowDepartment: [], //存放选中的资源配置  ztree
            selects:[
                {value:1},
                {value:2},
                {value:3},
                {value:4},
                {value:5},
                {value:6}
                ]
        };
    },
    created() {},
    mounted() {
        let self = this;
        // 获取树信息
        self.getTree(self);


    },
    methods: {
        // 请求树的方法
        getTree(self){
            self.axios({
                method: "get",
                url: officesTreeUrl
            })
            .then(function(response) {
                // 提示信息
                if (response.data.success) {
                  self.zTrees(response.data.data);
                } else {
                  self.$message({
                    duration: 1000,
                    message: response.data.msg,
                    center: true,
                    type: "error"
                  });
                }

            })
            .catch(function(err) {
                self.$message({
                    duration: 1000,
                    message: err,
                    center: true,
                    type: "error"
                });
                // console.log("噢耶，报错了 ");
            });
        },
        // 树结构方法
        zTrees(data) {
          let self = this;
          var setting = {
            view: {
              addHoverDom: addHoverDom,
              removeHoverDom: removeHoverDom,
              selectedMulti: false
            },
            check: {
              enable: true
            },

            callback: {
              onCheck: zTreeOnCheck

            }
          };

          var zNodes = data;
          $(document).ready(function() {
            $.fn.zTree.init($("#treeDemoOne1"), setting, zNodes);
          });

          var newCount = 1;
          function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0)
              return;
            var addStr =
              "<span class='button add' id='addBtn_" +
              treeNode.tId +
              "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn)
              btn.bind("click", function() {
                var zTree = $.fn.zTree.getZTreeObj("treeDemoOne1");
                zTree.addNodes(treeNode, {
                  id: 100 + newCount,
                  pId: treeNode.id,
                  name: "new node" + newCount++
                });
                return false;
              });
          }
          function removeHoverDom(treeId, treeNode) {
            $("#addBtn_" + treeNode.tId)
              .unbind()
              .remove();
          }
          function zTreeBeforeCheck(treeId, treeNode) {
            return false;
          }
          function zTreeOnCheck(event, treeId, treeNode) {
            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            var nodes = treeObj.getCheckedNodes(true);
            //编辑的时候在这里获取选中的id
            var node = treeObj.getNodeByTId(treeNode.tId);
            if (treeNode.checked == true) {
              self.resouceIds.push(node.id);

              let num = nodes;
              let str = "";
              for (var i = 0; i < num.length; i++) {
                str += num[i].name + ",";
              }
              self.nowDepartment.push(str);
            } else {
              //取消选中的时候  删掉 数组里的数据
              let num = self.nowDepartment.length - 1;
              self.nowDepartment.splice(num, 1);
              //取消的时候删除 id
              for (var i = 0; i < self.resouceIds.length; i++) {
                if (self.resouceIds[i] == node.id) {
                  self.resouceIds.splice(i, 1);
                }
              }
            }
          }
        },
    }
};
</script>
<style scoped>
    .zTreeBodybox{
        width: 303px;
        height: 335px;
    }
    #zTreeBody{
        top: 0;
        left: 0;
    }
</style>